<template>
    <div class="org">
        <el-row type="flex" justify="start">
            <el-col :span="24" style="text-align:left">
                <el-form :inline="true" :model="searchParam" class="demo-form-inline">
                    <el-form-item label="机构名称">
                        <el-input v-model="searchParam.name" placeholder="机构名称" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchOrg()">查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="机构名称"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="机构id"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="创建人"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="loginCode"
                            label="创建人账号"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            align="center"
                            show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <div class="t-a-c m-t-5">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchParam.page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="searchParam.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="searchParam.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>

</template>

<script>
    import {searchOrgList} from "@/api/orgApi";

    export default {
        name: "organization",
        data() {
            return {
                searchParam: {
                    name: null,
                    size: 10,
                    page: 1,
                    total: 0,
                },
                tableData: []
            }
        },
        created() {
            this.searchOrg();
        },
        methods: {
            searchOrg() {
                searchOrgList(this.searchParam).then(res => {
                    this.tableData = res.list;
                    this.searchParam.total = res.total;
                });
            },
            //分页
            handleSizeChange(val) {
                this.searchParam.size = val;
                this.searchOrg();
            },
            handleCurrentChange(val) {
                this.searchParam.page = val;
                this.searchOrg();
            },
        }
    }
</script>

<style scoped>
    .org {

    }

</style>